<template>
  <view class="container">
    <canvas canvas-id="signatureCanvas" 
            class="canvas"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"></canvas>
    <button @click="clearCanvas" class="clear-button">清除签名</button>
		<button @click="saveCanvasAsImage" class="clear-button">保存签名</button>
  </view>
</template>

<script>
	// 引入高德地图api提供的微信小程序的接口
	import amapFile from '@/util/amap-wx.130.js';
	// 创建地图
	var myAmapFun = new amapFile.AMapWX({
		key: '130d6a5be0a5351003b84750814c1abe'
	}); //key值要申请为 去高德地图申请微信小程序的key
export default {
  data() {
    return {
      ctx: null,
      points: [],
      isDrawing: false,
      time: '',
      canvasWidth: 0,
      canvasHeight: 0,
			location: null,
			address: '',
			canvasId: 'signatureCanvas' ,// Canvas 的 ID
			image:'',
    };
  },
  onReady() {
    // 获取 Canvas 上下文
    this.ctx = uni.createCanvasContext('signatureCanvas', this);

    // 获取 Canvas 宽度和高度
    this.getCanvasSize();
    // 绘制固定值
    this.drawFixedText();
  },
	mounted(){
		 this.getLoaction()
	},
  methods: {
    getCanvasSize() {
      // 使用 uni.getSystemInfoSync 获取屏幕宽度和高度
      const systemInfo = uni.getSystemInfoSync();
      this.canvasWidth = systemInfo.windowWidth;
      this.canvasHeight = systemInfo.windowHeight;
    },
    now() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补零
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
   async drawFixedText() {
      this.time = this.now();
			this.address= await this.getLoaction();
				console.log(this.address)
      // 绘制画板背景
      this.ctx.setFillStyle('#ffffff');
      this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

      // 绘制画板边框
      this.ctx.setStrokeStyle('#000000');
      this.ctx.strokeRect(0, 0, this.canvasWidth, this.canvasHeight);

			// 保存当前上下文状态
			this.ctx.save();
		 
			// 将原点移动到画布中心
			this.ctx.translate(this.canvasWidth / 2, this.canvasHeight / 2);
		 
			// 旋转上下文 90 度
			this.ctx.rotate(90 * Math.PI / 180);
		 
			// 设置字体样式
			this.ctx.setFontSize(20);
			this.ctx.setFillStyle('#000000');
		 
			// 绘制时间文本（旋转后）
			this.ctx.fillText(this.time, -150, 100); // 调整位置以居中显示
			
			// 绘制时间文本（旋转后）
			this.ctx.fillText(this.address,-250, 150); // 调整位置以居中显示
			
			this.ctx.fillText('签字处',-300, -100); // 调整位置以居中显示
		
		 
			// 调整第二个文本的垂直位置
			this.ctx.setFillStyle('#ff0000');
			this.ctx.setFontSize(28);
			this.ctx.fillText('确认安装完成', 100, 50); // 向下移动 40 个像素
		 
			// 恢复上下文状态
			this.ctx.restore();
	
      // // 绘制固定值
      // this.ctx.setFontSize(20);
      // this.ctx.setFillStyle('#ff0000');
      // this.ctx.fillText('确认安装完成', 20, this.canvasHeight - 50); // 底部显示“安装完成”

      // 绘制到画布
      this.ctx.draw();
    },
    handleTouchStart(e) {
      this.isDrawing = true;
      this.points = [e.touches[0]];
    },
    handleTouchMove(e) {
      if (this.isDrawing) {
        this.points.push(e.touches[0]);
        this.drawSignature();
      }
    },
    handleTouchEnd() {
      this.isDrawing = false;
    },
		// 获取位置的方法
			getLoaction() {
		        // 1.先开始定位
						return new Promise((resolve, reject) => {
		        wx.getLocation({
		          type: 'gcj02', // 比较精确
		          success: (res) => {
								 console.log('定位成功', res);
								    const latitude = res.latitude;
								    const longitude = res.longitude;
		            // 2,地址逆解析  根据经纬度获取实际地址
		          myAmapFun.getPoiAround({
		                location: `${longitude},${latitude}`, // 坐标
		                success: (data) => {
		                  console.log('逆地理编码结果', data);
										 // 确保 poisData 存在并且不为空
										    if (data.poisData && data.poisData.length > 0) {
										      const poi = data.poisData[0]; // 获取第一个 POI 数据
										 
										      // 检查每个字段是否存在，并处理可能的 null 值
										      const pname = poi.pname || '';
										      const cityname = poi.cityname || '';
										      const adname = poi.adname || '';
										      const address = poi.address || '';
										 
										      this.address = `${pname}${cityname}${adname}${address}`;
										      console.log('完整的地址信息:', this.address);
													 resolve(this.address); // 返回地址
										    } else {
										      console.error('没有找到附近的 POI 数据');
													 reject(new Error('没有找到附近的 POI 数据'));
										    }
		                },
		                fail: (error) => {
		                  console.error('逆地理编码失败', error);
											 reject(error);
		                }
		              });
		            },
								
		            fail: (err) => {
		              console.error('定位失败', err);
									 reject(err);
		            }  
		        })
						});
		      },
    drawSignature() {
      this.ctx.beginPath();
      this.ctx.moveTo(this.points[0].x, this.points[0].y);
      for (let i = 1; i < this.points.length; i++) {
        this.ctx.lineTo(this.points[i].x, this.points[i].y);
      }
      this.ctx.setStrokeStyle('#000000');
      this.ctx.setLineWidth(2);
      this.ctx.stroke();
      this.ctx.draw(true); // 实时绘制
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
       // 重新绘制固定值
     // 获取 Canvas 宽度和高度
     this.getCanvasSize();
     
     // 绘制固定值
     this.drawFixedText();
    },
		// 保存画板为照片
		  saveCanvasAsImage() {
		    const ctx = uni.createCanvasContext(this.canvasId, this); // 或 wx.createCanvasContext
		    // 确保绘制操作已完成（如需）
		    // ctx.draw(); // 如果使用 uni-app 的 createCanvasContext，可能需要手动触发绘制
		 
		    // 转换 Canvas 为临时文件
		    uni.canvasToTempFilePath({
		      canvasId: this.canvasId,
		      success: (res) => {
		        const tempFilePath = res.tempFilePath;
		        console.log('临时文件路径:', tempFilePath);
						this.uploadFile(tempFilePath);
						console.log(this.image)
						// 存储参数
		        // // 保存到相册（需用户授权）
		        // uni.saveImageToPhotosAlbum({
		        //   filePath: tempFilePath,
		        //   success: () => {
		        //     uni.showToast({ title: '保存成功' });
		        //   },
		        //   fail: (err) => {
		        //     console.error('保存失败:', err);
		        //     uni.showToast({ title: '保存失败', icon: 'none' });
		        //   }
		        // });
		      },
		      fail: (err) => {
		        console.error('转换失败:', err);
		        uni.showToast({ title: '生成图片失败', icon: 'none' });
		      }
		    }, this);
		  },
			uploadFile(filePath) {
			      uni.uploadFile({
			        url: 'https://image.ff5630.com/upload/buy/upload', // 仅为示例，非真实的接口地址
			        filePath: filePath,
			        name: 'file',
			        formData: {
			          user: 'test'
			        },
			        success: (uploadFileRes) => { // 使用箭头函数来保持this的上下文
					try {
					          // 解析服务器返回的JSON响应
					          const responseObj = JSON.parse(uploadFileRes.data);
					          const uploadedImageUrl = responseObj.data; // 假设服务器返回的是图片的URL
					 
					          // 检查并添加URL到picture数组（避免重复）
					          const completeUrl = uploadedImageUrl.startsWith('http://') || uploadedImageUrl.startsWith('https://')
					            ? uploadedImageUrl
					            : 'https://' + uploadedImageUrl; // 根据实际情况调整URL格式
					 
					          this.image=completeUrl;
					          console.log('上传成功，图片URL：', completeUrl);
									
					          // 其他处理上传成功后的逻辑可以在这里添加
										 uni.$emit('img', this.image);
										   uni.navigateBack({
										         delta: 1
										       });
					 
					        } catch (error) {
					          console.error('解析上传响应失败：', error);
					        }
			        },
			        fail(err) {
			          console.error('上传失败：', err);
			        }
			      });
				  }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh; /* 视口高度 */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
	overflow: hidden;
}

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff; 
	overflow: hidden;
}

.canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}

.clear-button {
  margin-top: 10px;
  align-self: center;
}
</style>